<template>
	<div>
		<div>
			<input type="text" v-model="keyword"> 
		</div>
		<div class="goodsbox">
			<Goods v-for="el in goodsarr" :key="el.id" :data="el"></Goods>		
		</div>
		<button @click="loadmore">加载更多</button>
	</div>
</template>

<script setup>
	import {
		onMounted,
		getCurrentInstance,
		ref,
		reactive,
		watch
	} from "vue"
	import Goods from "./Goods.vue"
	let {
		proxy: {
			axios,
			url
		}
	} = getCurrentInstance()
	
	let keyword=ref("")
	let start=ref(0)
	let goodsarr = reactive([])
	watch(keyword,()=>{
		getgoods(true)
	})
	let getgoods=async (flag)=> {
		let res = await axios.get("/api/getgoods",{params:{keyword:keyword.value,start:start.value}})
		console.log(res.data)
		if(flag){goodsarr.splice(0,goodsarr.length)}//清空数组
		res.data.map(el => goodsarr.push(el))
	}
	onMounted(getgoods)
	
	
	let loadmore=()=>{
		start.value+=10
		getgoods(false)
	}	
</script>

<style scoped>
	.goodsbox {
		background-color: rgb(230, 230, 230);
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
</style>